<template>
  <div class="app-container">
    <FilterSearch class="filter-search" :value="queryParams" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }"
      :config="configData" labelWidth="90px" position="right"></FilterSearch>
    <div class="main">
      <div class="table">
        <el-table :data="tableData.rows" border v-loading="tableData.loading" style="width: 100%">
          <el-table-column prop="id" label="ID" width="180">
          </el-table-column>
          <el-table-column prop="name" label="函数名称">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template v-slot="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination @current-change="currentChange" layout="total, prev, pager, next, jumper" :total="tableData.total"
          :current-page="queryParams.currentPage" :page-size="queryParams.size">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { ref, reactive, computed, onBeforeMount } from "vue"
export default {
  setup() {
    const { proxy } = getCurrentInstance();

    const tableData = reactive({
      rows: [
        {
          id: 1,
          name: "func1",
          createTime: "2023/11/04 15:08:09",
          updateTime: "2023/12/11 16:05:39",
        },
        {
          id: 2,
          name: "func2",
          createTime: "2023/11/04 15:08:09",
          updateTime: "2023/12/11 16:05:39",
        },
        {
          id: 3,
          name: "func3",
          createTime: "2023/11/04 15:08:09",
          updateTime: "2023/12/11 16:05:39",
        }
      ],
      total: 0,
      loading: false
    });
    const queryParams = ref({
      pageNum: 1,
      pageSize: 10,
      startTime: "",
      endTime: "",
      attendanceUser: "",
      startAndendTime: []
    });

    const configData = computed(() => {
      let config = {
        itemConfig: [
          {
            type: "input",
            prop: "name",
            clearable: "关闭",
            label: "函数名称",
            placeholder: "请输入",
          }
        ],
        operate: [
          {
            icon: "Search",
            type: "primary",
            name: "查询",
            handleClick: getList,
            rule: true,
          },
          {
            icon: "RefreshRight",
            type: "primary",
            name: "重置",
            handleClick: reset,
            rule: true,
          },
          {
            icon: "Refresh",
            type: "primary",
            name: "点击导入",
            handleClick: "",
            rule: true,
          }
        ],
        rules: {},
      };
      return config;
    })

    const currentChange = (currentPage) => {
      proxy.queryParams.currentPage = currentPage;
      getList();
    }
    const getList = () => {

    }
    const reset = () => {

    }
    return {
      tableData, queryParams, configData, currentChange
    }
  }
}


</script>
<style lang="scss" scoped></style>